<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mychart {
            width:800px;
            height: 500px;
            margin:20px auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="mychart"></div>
</body>
<script src="./lib/echarts.min.js"></script>
<script src="./lib/vintage.js"></script>
<script>
    //获取dom
    const box=document.querySelector('.mychart')
    //生成echarts对象
    const mychart=echarts.init(box,'',{renderer:'svg'})

    //配置图表对象
    const options={
        //图表标题
        title:{
            text:'echarts入门',
            subtext:'演示柱形图'
        },
        //图例
        legend:{
            data:['平均就业薪资','当前就业薪资','招生']
        },
        //提示
        tooltip:{},
        //x轴
        xAxis:{
            data:['全栈','大数据','人工智能','测试','UI']
        },
        //y轴
        yAxis:{},
        //系列--重点！！！！！
        series:[
            {
                //设置柱状图
                type:'bar',
                name:'平均就业薪资',
                //data设置图表数据值
                data:[18000,15000,17000,13000,11000]
            },
            {
               //设置拆线图
              type:'line',
              name:'当前就业薪资',
              data:[20000,17000,21000,13000,12000]  
            },
            {
                //通过type设置图表类型，pie饼图
                type:'pie',
                name:'招生',
                //radius设置饼图半径
                radius:['0%','30%'],
                //设置饼图位置 [左,顶]
                center:['80%',80],
                data:[
                    {name:'积云',value:6000},
                    {name:'北大',value:3000},
                    {name:'清华',value:3500},
                    {name:'复旦',value:2000},
                ]
            }
        ]

    }

    //渲染图表
    mychart.setOption(options)
</script>
</html>